<template>
	<view class="password-container">
		<!-- 表单区域 -->
		<view class="password-form">
			<!-- 旧密码 -->
			<view class="form-item">
				<view class="input-label">
					<uni-icons type="locked" size="20" color="#666"></uni-icons>
					<text>旧密码</text>
				</view>
				<input class="meituan-input" password v-model="oldPassword" placeholder="请输入旧密码"
					placeholder-style="color:#ccc" />
			</view>

			<!-- 新密码 -->
			<view class="form-item">
				<view class="input-label">
					<uni-icons type="locked" size="20" color="#666"></uni-icons>
					<text>新密码</text>
				</view>
				<input class="meituan-input" password v-model="newPassword" placeholder="输入新密码"
					placeholder-style="color:#ccc" />
			</view>

			<!-- 确认密码 -->
			<view class="form-item">
				<view class="input-label">
					<uni-icons type="locked" size="20" color="#666"></uni-icons>
					<text>确认密码</text>
				</view>
				<input class="meituan-input" password v-model="checkPassword" placeholder="确认新密码"
					placeholder-style="color:#ccc" />
			</view>

			<!-- 提交按钮 -->
			<button class="submit-btn active" @click="handleSubmit">
				确认修改
			</button>
		</view>
	</view>
</template>

<script>
	import {
		updatePwd
	} from '@/api/user.js'
	export default {
		data() {
			return {
				oldPassword: '',
				newPassword: '',
				checkPassword: ''
			}
		},
		methods: {
			async handleSubmit() {
				if (this.newPassword != this.checkPassword) {
					uni.showToast({
						title: "新密码与确认密码不一致",
						icon: "error"
					})
					return
				}

				uni.showLoading({
					title: '修改中...'
				})

				await updatePwd({
					oldPassword: this.oldPassword,
					newPassword: this.newPassword,
					checkPassword: this.checkPassword
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '密码修改成功',
						icon: 'success',
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}, 1000)
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: err.message || '修改失败',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$meituan-yellow: #FFD300;
	$meituan-dark: #222;

	.password-container {
		height: 100vh;
		background-color: #f5f5f5;

		.password-form {
			padding: 30rpx;
			margin-top: 30rpx;

			.form-item {
				background: white;
				border-radius: 12rpx;
				padding: 24rpx;
				margin-bottom: 30rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

				.input-label {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					font-size: 28rpx;
					color: #666;

					text {
						margin-left: 10rpx;
					}
				}

				.meituan-input {
					height: 80rpx;
					font-size: 30rpx;
					padding: 0 20rpx;
					background: #f8f8f8;
					border-radius: 8rpx;
				}
			}

			.submit-btn {
				background: $meituan-yellow;
				color: $meituan-dark;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 45rpx;
				font-size: 32rpx;
				border: none;
				margin-top: 60rpx;
				font-weight: bold;

				&::after {
					border: none;
				}
			}
		}
	}
</style>